<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<!-- CSS -->

<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/datepicker.css">
<link rel="stylesheet" type="text/css" href="libs/SlickGrid-2.0.2/slick.grid.css">

<!--   <link rel="stylesheet" type="text/css" media="screen" href="libs/SlickGrid-2.0.2/css/smoothness/jquery-ui-1.8.16.custom.css" /> -->
<!--    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.22.custom.css" />   -->

<link rel="stylesheet" type="text/css" href="libs/SlickGrid-2.0.2/controls/slick.pager.css">
<link rel="stylesheet" type="text/css" href="libs/SlickGrid-2.0.2/controls/slick.columnpicker.css">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <script src="libs/jquery/jquery-1.7.2.js"></script>
  <script src="libs/ember/handlebars-1.0.0.beta.6.js"></script>
  <script src="libs/ember/ember.js"></script>
  <script src="libs/ember/ember-data.js"></script>
<!--   <script src="libs/ember/ember-1.0.pre.js"></script> -->

  <script src="libs/SlickGrid-2.0.2/lib/jquery.event.drag-2.0.min.js"></script>
  <script src="libs/SlickGrid-2.0.2/lib/jquery.event.drop-2.0.min.js"></script>
  <script src="libs/SlickGrid-2.0.2/lib/jquery-ui-1.8.16.custom.min.js"></script>
  <script src="libs/SlickGrid-2.0.2/slick.core.js"></script>
  <script src="libs/SlickGrid-2.0.2/plugins/slick.rowselectionmodel.js"></script>
  <script src="libs/SlickGrid-2.0.2/slick.dataview.js"></script>
  <script src="libs/SlickGrid-2.0.2/controls/slick.pager.js"></script>
  <script src="libs/SlickGrid-2.0.2/controls/slick.columnpicker.js"></script>
  <script src="libs/SlickGrid-2.0.2/plugins/slick.rowselectionmodel.js"></script>
  <script src="libs/SlickGrid-2.0.2/plugins/slick.cellselectionmodel.js"></script>
  <script src="libs/SlickGrid-2.0.2/slick.formatters.js"></script>
  <script src="libs/SlickGrid-2.0.2/slick.editors.js"></script>
  <script src="libs/SlickGrid-2.0.2/slick.grid.js"></script>
  <script src="libs/jquery/jquery.ba-tinypubsub.js"></script>

  <script src="libs/bootstrap/js/bootstrap.js"></script>
  <script src="libs/bootstrap/js/bootstrap-datepicker.js"></script>
  <script src="libs/bootstrap/js/bootstrap-typeahead.js"></script>
  
  <script>

  var App = Em.Application.create();
  
  App.Picker = Em.TextField.extend({
    classNames : ['typeahead'],
    attributeBindings : 'type value size placeholder required'.w(),
    typeBinding : 'parentView.type',
    sizeBinding : 'parentView.size',
    valueBinding : 'parentView.value',
    requiredBinding : 'parentView.requiredAttribute',
    didInsertElement : function() {
      this.$().typeahead({
        strings : false,
        property : 'id',
        properties: ['id','instrument', 'currency'],
        source : function (typeahead, query) {
          $.getJSON('api/symbol/findAll', function(data) {
            typeahead.process(data);
          });
        },
        menu: '<table class="table table-condensed typeahead dropdown-menu" style="width:400px">'+
        '<thead><tr class="tableheader"><th>Symbol</th><th>Instrument</th><th>Currency</th></tr></thead>'+
        '<tbody></tbody></table>',
        item: '<tr> <td><a id="0"></a></td> <td><a id="1"></a></td> <td><a id="2"></a></td> </tr>',
        items : 10
      });
    }
  });

  
  
      $(document).ready(function () {
        $('#th1').typeahead({
            strings : false,
            property : 'id',
            properties: ['id','instrument', 'currency'],
            source : function (typeahead, query) {
              $.getJSON('api/symbol/findAll', function(data) {
                typeahead.process(data);
              });
            },
            menu: '<table class="table table-condensed typeahead dropdown-menu" style="width:400px">'+
            '<thead><tr class="tableheader"><th>Symbol</th><th>Instrument</th><th>Currency</th></tr></thead>'+
            '<tbody></tbody></table>',
            item: '<tr> <td><a id="0"></a></td> <td><a id="1"></a></td> <td><a id="2"></a></td> </tr>',
            items : 10
        });
      });
  
  </script>

  <script type="text/x-handlebars">

<form class="form-horizontal form-actions" id="form1">
  {{view App.Picker type="text"}}<br>
  <input type="text" data-provide="typeahead"><br>
  {{view Em.TextField}}<br>
</form>

  </script>




</body>

</html>




<!--   <input type="text" data-provide="typeahead" id="th1" style="margin:100px"> -->
